<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="取票码" ><img :src="props.row.cdkCode"></span></el-form-item>
            <el-form-item label="订单序号"><span>{{ props.row.orderId  }}</span> </el-form-item>
            <el-form-item label="订单编号"><span>{{ props.row.out_trade_no }}</span> </el-form-item>
            <el-form-item label="创建时间"><span>{{ props.row.createTime }}</span></el-form-item>
            <el-form-item label="所属用户"><span>{{ props.row.user.realName }}</span></el-form-item>
            <el-form-item label="订单金额"><span>{{ props.row.totalMoney}}</span></el-form-item>
            <el-form-item label="订单状态"><span>{{ props.row.status.orderStatus}}</span></el-form-item>
            <el-form-item label="取票地址">
              <span>{{ props.row.address.address}}{{ props.row.address.addressDetail}}{{ props.row.address.addressidName}}</span>
            </el-form-item>
            <br>
            <div v-for="(item,index) in props.row.items" :key="index" style="background-color: aliceblue">
              <el-form-item label="游玩地点:" ><span>{{ item.area.aname}}</span></el-form-item>
              <el-form-item label="订票数量"><span>{{ item.item_num}}</span></el-form-item>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" prop="out_trade_no"></el-table-column>
      <el-table-column label="交易金额" prop="totalMoney"></el-table-column>
      <el-table-column label="订单状态" prop="status.orderStatus"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
    </el-table>
    <div class="block" align="center" style="margin-top:25px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-form-item__label {
  margin-left: 60px;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          orderId: 36,
          uid: 23,
          isPay: 1,
          createTime: "2022-03-19T08:19:59.000+0000",
          totalMoney: 120,
          addrId: 1,
          cdk: "PALv95Fl",
          out_trade_no: "2022031916195932226614583395334",
          items: [
            {
              itemId: 27,
              oid: 36,
              a_id: 3,
              item_num: 1,
              area: {
                aid: 3,
                aname: "华清宫",
                addr: "西安市临潼区骊山北侧",
                price: 120,
                grade: 4,
                status: null,
                refreshTime: null,
                apic1:
                  "http://r8uara5jv.hn-bkt.clouddn.com/787d09821cf540caa26a7d855c604201.jpg",
                apic2:
                  "http://r8uara5jv.hn-bkt.clouddn.com/ee737d07b7494fbfa91f899cdff7ef38.png",
                apic3:
                  "http://r8uara5jv.hn-bkt.clouddn.com/c3dad0501cd446fdb5b5d56f1f07e70d.jpg",
                detail:
                  "西安鼓楼与钟楼相望，是古城的标志性建筑之一，也是国内最大的鼓楼。登上鼓楼，能够看到一面高1.8米的大鼓；在鼓楼上能看到回民街熙熙攘攘的人流，闻到回民街的美食香味，让人心广神怡。在钟楼和鼓楼之间为钟鼓楼广场，绿草红花点缀其间，有造型独特的音乐喷泉，这里的夜景很美，适合拍照！\r\n\r\n",
                desc: "陕西必逛的十大景点",
              },
            },
          ],
          status: {
            statusId: 1,
            orderStatus: "已支付",
          },
          user: {
            uid: 23,
            uname: "admin@163.com",
            realName: "test",
          },
          address: {
            addressid: 1,
            address: "陕西省西安市",
            addressDetail: "华清池南门向西1号",
            addressidName: "华清池点",
          },
        },
      ],
      currentPage: "1",
      pageSize: "5",
      total:100,
    };
  },
  created: function () {
    this.$axios
      .get("orders?page=" + this.currentPage + "&pageSize=" + this.pageSize)
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.tableData = res.data.info;
          this.total=res.data.countInfo;
        }
      })
      .catch();
  },
  methods:{
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.$axios
        .get("orders?page="+this.currentPage+"&pageSize="+this.pageSize)
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.info;
            this.total=res.data.countInfo;
          }
        })
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.$axios
        .get("orders?page="+this.currentPage+"&pageSize="+this.pageSize)
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.info;
            this.total=res.data.countInfo;
          }
        });
    },
  }
};
</script>
